<template>
  <el-dialog width="1200px" :visible.sync="popupVisible" :before-close="close">
    <scrollbar>
      <div id="one" align="center">
        <h1 style="font-size:25px;" align="center">Shelves Task</h1>
      </div>
      <div id="two" align="left">
        <svg id="barcode" />
      </div>
      <div id="three">
        <table align="center" cellspacing="0" cellpadding="1" width="100%" style="border-collapse:collapse;font-size:13px">
          <tr>
            <td align="right" width="100px" style="font-weight:bold">{{$t('m.shelves.shelvestaskcode')}}</td>
            <td>{{detail.shelvestaskcode}}</td>
            <td align="right" width="100px" style="font-weight:bold">{{$t('m.shelves.shelvescode')}}</td>
            <td>{{detail.shelvescode}}</td>
            <td align="right" width="100px" style="font-weight:bold">{{$t('m.shelves.charge')}}</td>
            <td>{{users}}</td>
          </tr>
        </table>
      </div>
      <div id="four">
        <TABLE align="center" border="1" cellspacing="0" cellpadding="1" width="100%" style="border-collapse:collapse;table-layout:fixed" bordercolor="#333333">
          <thead style="font-size:12px">
            <TR>
              <TD width="5%">
                <DIV align="center"></DIV>
              </TD>
              <TD width="15%">
                <DIV align="center">
                  <b>SKU</b>
                </DIV>
              </TD>
              <TD>
                <DIV align="center">
                  <b>ProductName</b>
                </DIV>
              </TD>
              <TD width="20%">
                <DIV align="center">
                  <b>Spec</b>
                </DIV>
              </TD>
              <TD width="8%">
                <DIV align="center">
                  <b>Qty</b>
                </DIV>
              </TD>
              <TD width="15%">
                <DIV align="center">
                  <b>Location</b>
                </DIV>
              </TD>
            </TR>
          </thead>
          <tbody style="font-size:12px;">
            <tr v-for="(item,i) in tableData" :key="i">
              <td align="center">{{i+1}}</td>
              <td align="center">{{item.productspeccode}}</td>
              <!-- <td align="center">{{item.suppliercode}}</td> -->
              <td align="center">{{item.productname}}</td>
              <td align="center">{{item.productspec}}</td>
              <td align="center">{{item.shelvesquantity}}</td>
              <td align="center">{{item.shelveslocationcode}}</td>
              <!-- <td align="center">{{item.practicalquantity}}</td> -->
              <!-- <td align="center">{{item.practicallocationcode}}</td> -->
            </tr>
          </tbody>
        </TABLE>
      </div>
      <!-- table end -->
    </scrollbar>
    <div slot="footer" align="center">
      <el-button type="primary" @click="print()">{{$t('m.print')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import scrollbar from '@/components/common/scrollbar'
import { getLodop } from '@/utils/LodopFuncs'
import JsBarcode from 'jsbarcode'
export default {
  name:'shelvesPrint',
  props:['popupVisible', 'detail', 'users'],
  data(){
    return {
      tableData:[]
    }
  },
  components:{
    scrollbar
  },
  mounted(){
    this.$nextTick(() => {
      this.barcode()
    })
  },
  watch:{
    detail:{
      handler(){
        this.tableData = this.detail.shelvestaskdetail
          ? JSON.parse(JSON.stringify(this.detail.shelvestaskdetail))
          : []
      },
      immediate:true
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    barcode(){
      let barCode = this.detail.shelvestaskcode
      JsBarcode('#barcode', barCode, {
        format:'CODE128', //选择要使用的条形码类型
        height:60, //高度
        width:1.5, //设置条之间的宽度
        fontSize:14, //设置文本的大小
        text:barCode, //显示文本
        displayValue:true, //是否在条形码下方显示文字
        textPosition:'bottom', //设置文本的垂直位置
        //fontOptions: "bold italic", //使文字加粗体或变斜体
        background:'#fff', //设置条形码的背景
        font:'微软雅黑', //设置文本的字体
        //lineColor: "#2196f3", //设置条和文本的颜色。
        margin:15 //设置条形码周围的空白边距
      })
    },
    printInit(){
      let LODOP = getLodop()
      LODOP.PRINT_INIT('到货通知单')
      LODOP.SET_PRINT_PAGESIZE(1, '', '', '')
      let strStyle = '<style>table,td{padding:3px 10px;word-break:break-word;}tbody td{word-wrap:break-word;}</style>'
      let tableStyle = '<style> table,td,th {padding:3px 5px;}</style>'
      LODOP.ADD_PRINT_TABLE(
        210,
        '3%',
        '94%',
        800,
        strStyle + document.getElementById('four').innerHTML
      )
      LODOP.ADD_PRINT_HTM(
        30,
        '3%',
        '94%',
        109,
        document.getElementById('one').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.ADD_PRINT_HTM(
        60, //距离上面高度
        '3%',
        '94%',
        280, //元素高度
        document.getElementById('two').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.ADD_PRINT_TABLE(
        170,
        '3%',
        '94%',
        100,
        tableStyle + document.getElementById('three').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.NewPageA()
      LODOP.ADD_PRINT_HTM(
        10,
        650,
        200,
        100,
        '<font color=\'#0000ff\' format=\'Num\'><span tdata=\'pageNO\'>' +
          'NO.##'+'</span>/<span tdata=\'pageCount\'>'+' Total : ##'+'</span></font>'
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
    },
    print(index){
      let LODOP = getLodop()
      this.printInit(index)
      LODOP.PREVIEW()
      this.$emit('close')
      // LODOP.PRINT(); 直接打印
      //LODOP.PRINTA(); 选择打印机打印
    }
  }
}
</script>
<style lang="scss" scoped>
table {
  text-align: left;
}
#one {
  color: #333;
}
tr > td {
  padding: 8px 5px;
  word-wrap:break-word;
}
</style>